<template>
  <div class="employ-wrap">
    <div class="search-box">
      <img src="./back.png" class="back" @click="backPage" onclick="return false"/>
      <div class="key-box">
        <img src="./search.png" class="pic1" onclick="return false"/>
        <input class="key" placeholder="请输入姓名或身份证号" v-model="check"/>
      </div>
      <button type="button" class="search-btn" @click="searchEmploy">搜索</button>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad" class="punch-box"
    >
      <div class="punch-con" v-for="(item,index) in employList" :key="index" v-if="employList.length">
        <div class="punch-con1">
          <span class="username">{{item.userName}}</span>
          <span class="time-box"
                :class="{'active1':(item.status == 0 && item.delStatus == 0) || (item.status == 0 && item.delStatus == 2)}"
                v-if="(item.status == 0 && item.delStatus == 0) || (item.status == 0 && item.delStatus == 2)">打卡机录入中</span>
          <span class="time-box" :class="{'active2':item.status == 0 && item.delStatus == 1}"
                v-else-if="item.status == 0 && item.delStatus == 1">打卡机删除中</span>
          <div class="btn-edit" v-else>
            <button class="del-con" type="button"
                    @click="openModal(item.userName,item.userCardNumber,item.workTime,item.workNum,item.workClass,item.duan,item.sn)">
              删除
            </button>
            <button class="edit-con" type="button"
                    @click="editPunch(item.userName,item.userCardNumber,item.workTime,item.workNum,item.workClass,item.duan,item.address,item.sn)">
              编辑
            </button>
          </div>
        </div>
        <div class="punch-con2">
          <span>身份证号：{{item.userCardNumber}}</span>
          <span>企业：{{item.mechanismName}}</span>
          <span>入职日期：{{item.workTime}}</span>
          <div class="num-box">
            <span>工号：</span>
            <span class="active3"
                  v-if="item.workNum == '' &&((item.status == 0 && item.delStatus == 0) || (item.status == 0 && item.delStatus == 2))">未添加</span>
            <span class="active3"
                  v-else-if="item.workNum == '' && item.status == 0 && item.delStatus == 1">未添加</span>
            <div v-else>
              <span v-if="item.workNum != ''">{{item.workNum}}</span>
              <span class="active3" v-else>未添加</span>
            </div>
          </div>
          <div class="level-box"><span>班次：{{item.workClass}}</span><span class="level">部门（段位）：{{item.duan}}</span>
          </div>
          <span>打卡地点：{{item.address}}</span>
        </div>
      </div>
    </van-list>

    <div class="empty-wrap" v-if="employList.length == 0 && !loading">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty"/></div>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>

    <div class="log-box2" @click="classesPage">
      <img src="./btn_class.png" class="pic2" onclick="return false"/>
    </div>
    <div class="log-box1" @click="toPage">
      <img src="./btn_entry.png" class="pic2" onclick="return false"/>
    </div>


    <v-dialog v-model="sendVal" content="请问是否确定删除该员工？" cancelText="取消" confirmText="删除" @confirm="delEmploy"
              @cancel="cancel"></v-dialog>

  </div>
</template>


<script>
  import {baseUrl} from "../../config/env"
  import dialog from "../../components/dialog"

  export default {
    inject: ['reload'],
    data() {
      return {
        check: "",
        mechanismId: "",
        employList: [],
        currentPage: 1,
        PageSize: 20,
        loading: false,
        finished: false,
        name: "",
        sendVal: false,
        userName: "",
        certNo: "",
        workTime: "",
        workNum: "",
        workClass: "",
        duan: "",
        sn: "",
        userSign: ""
      }
    },
    mounted() {
      this.mechanismId = this.$route.query.id;
      this.name = this.$route.query.name;
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
    },
    methods: {
      onLoad() {
        // 异步更新数据
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.queryEmployList();
            this.timer = null;
          }, 500)
        }
      },
      queryEmployList() {
        let time = (new Date()).getTime();
        let url = baseUrl + "/data/get_ka_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/data/get_ka_list?mechanismId=" + this.mechanismId + "&check=" + this.check + "&page=" + this.currentPage + "&size=" + this.PageSize + "&sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data != null && resultObj.data.length > 0) {
              this.employList = this.employList.concat(resultObj.data);//status 0 delStatus 0 打卡机录入中,status 0 delStatus 1 打卡删除入中，status 1 delStatus 0,2 删除

              //加载状态结束
              this.loading = false;
              this.currentPage++;
            } else {//数据全部加载完成
              this.loading = false;
              if (this.employList.length >= resultObj.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      toPage() {//员工录入
        this.$router.push({path: '/employadd', query: {id: this.mechanismId, name: this.name}})
      },
      classesPage() {//班次调整
        this.$router.push({path: '/punshclasses', query: {id: this.mechanismId, name: this.name}})
      },
      backPage() {
        this.$router.push("/punshmanage");
      },
      delEmploy() {//删除
        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {
          "userName": this.userName,
          "userCardNumber": this.certNo,
          "mechanismId": this.mechanismId,
          "workTime": this.workTime,
          "workNum": this.workNum,
          "delStatus": 1,
          "workClass": this.workClass,
          "duan": this.duan,
          "sn": this.sn
        };
        let time = (new Date()).getTime();
        let url = baseUrl + "/data/add_user_ka?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.post(baseUrl + "/data/add_user_ka?sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time, data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          this.sendVal = false;
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {
              this.reload();
              this.$vux.toast.text("删除失败，请重试", "middle");
            } else {
              this.reload();
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      openModal(name, num, workTime, workNum, workClass, duan, sn) {//打开删除提示框
        this.userName = name;
        this.certNo = num;
        this.workTime = workTime;
        this.workNum = workNum;
        this.sendVal = true;
        this.workClass = workClass;
        this.duan = duan;
        this.sn = sn;
      },
      cancel() {
        this.sendVal = false;
      },
      searchEmploy() {//搜索
        this.initVanList();
      },
      initVanList() {//初始化
        this.currentPage = 1;
        this.PageSize = 20;
        this.employList = [];
        this.loading = true;
        this.finished = false;
        if (this.loading) {
          this.onLoad();
        }
      },
      editPunch(name, num, workTime, workNum, workClass, dan, address, sn) {//修改工号
        this.$router.push({
          path: '/employedit',
          query: {
            "userName": name,
            "certNo": num,
            "workTime": workTime,
            "workNum": workNum,
            "workClass": workClass,
            "dan": dan,
            "address": address,
            "mechanismId": this.mechanismId,
            "companyName": this.name,
            "sn": sn,
          }
        })
      }
    },
    components: {
      "v-dialog": dialog
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../assets/stylus/mixin.styl"

  .employ-wrap
    wh(100%, 100%)
    background: rgba(242, 242, 242, 1)
    .search-box
      display flex
      align-items: center
      wh(100%, 1.2rem)
      background: $color
      position: fixed
      top: 0
      z-index: 99
      .back
        wh(0.48rem, 0.48rem)
        margin-left: 2%
        margin-right: 0.253rem
      .key-box
        display: flex
        align-items: center
        wh(73.07%, 0.8rem)
        background: rgba(255, 255, 255, 1)
        border-radius(0.4rem)
        flex: 1
        .pic1
          margin-left: 0.253rem
          margin-right: 0.253rem
          wh(0.533rem, 0.533rem)
        .key
          width: 80%
          height: 0.5rem
          line-height: 0.5rem
          size-color(0.4rem, rgba(204, 204, 204, 1))
      .search-btn
        margin-left: 0.307rem
        margin-right: 3.33%
        wh(1.44rem, 0.72rem)
        line-height: 0.72rem
        border: 0.027rem solid rgba(255, 255, 255, 1)
        border-radius(0.16rem)
        size-color(0.4rem, rgba(255, 255, 255, 1))
        background: rgba(60, 175, 255, 1)
        text-align: center
    .punch-box
      position: absolute
      top: 1.2rem
      width: 100%
      background: rgba(242, 242, 242, 1)
      .punch-con
        wh(100%, 5.12rem)
        background: rgba(255, 255, 255, 1)
        margin-bottom: 0.267rem
        .punch-con1
          margin: 0 auto
          display: flex
          justify-content: space-between
          align-items: center
          border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
          wh(93.6%, 1.173rem)
          .username
            font-size: 0.453rem
            color: rgba(51, 51, 51, 1)
          .time-box
            font-size: 0.373rem
          .btn-edit
            display: flex
            align-items: center
            .del-con
              text-align: center
              margin-right: 0.267rem
              wh(1.333rem, 0.64rem)
              border: 0.027rem solid rgba(128, 128, 128, 1)
              border-radius(0.32rem)
              size-color(0.347rem, rgba(128, 128, 128, 1))
              background: #FFF
            .edit-con
              text-align: center
              wh(1.333rem, 0.64rem)
              border: 0.027rem solid rgba(60, 175, 255, 1)
              border-radius(0.32rem)
              size-color(0.347rem, rgba(60, 175, 255, 1))
              background: #FFF
          .active1
            color: rgba(60, 175, 255, 1)
          .active2
            color: rgba(255, 83, 83, 1)
        .punch-con2
          font-size: 0.373rem
          color: rgba(102, 102, 102, 1)
          display: flex
          flex-direction: column
          justify-content: center
          margin: 0 auto
          wh(93.6%, 3.92rem)
          span
            padding-bottom: 0.24rem
          .num-box
            display: flex
            .num
              color: rgba(60, 175, 255, 1)
            .active3
              color: #ccc
          .level-box
            margin-bottom: 0.24rem
            .level
              margin-left: 0.8rem

    .log-box1
      position: fixed
      z-index: 99
      bottom: 0.28rem
      right: 0.24rem
      wh(1.76rem, 1.76rem)
      .pic2
        wh(100%, 100%)
    .log-box2
      position: fixed
      z-index: 99
      bottom: 2.2rem
      right: 0.24rem
      wh(1.76rem, 1.76rem)
      .pic2
        wh(100%, 100%)
    .empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 1.2rem
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
</style>
